<template>
    <view class="wanl-order-list">
        <view class="navbar">
            <view
                class="nav-item text-df"
                v-for="(item, index) in navList"
                :key="item.status"
                :class="{ current: tabCurrentIndex == index }"
                @tap="tabClick(index)"
            >
                {{ item.text }}
            </view>
        </view>
        <swiper :current="tabCurrentIndex" style="height: calc(100% - 80rpx)" duration="300" @change="changeTab">
            <swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.status">
                <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
                    <!-- 空白页 -->
                    <wanl-empty text="没有找到任何订单" v-if="tag.loaded === true && tag.orderList.length === 0" />
                    <!-- 订单列表 -->
                    <view v-for="(order, okey) in tag.orderList" :key="order.id" class="order-item radius-bock">
                        <view class="head">
                            <view class="shop wanl-gray" @tap="onShop(order.shop_id)">
                                <text class="wlIcon-dianpu1 wanl-black"></text>
                                <text class="wanl-black margin-lr-xs text-30">{{ order.shop.shopname }}</text>
                                <text class="wlIcon-fanhuigengduo text-sm"></text>
                            </view>
                            <view class="margin-right-bj text-sm">
                                {{
                                    order.status == 0
                                        ? "待支付"
                                        : order.status == 1
                                        ? "待发货"
                                        : order.status == 2
                                        ? "待自提"
                                        : order.status == 3
                                        ? "待收货"
                                        : order.status == 4
                                        ? "已完成"
                                        : order.status == -1
                                        ? "已取消"
                                        : ""
                                }}
                                <!-- <text class="status" :style="{ color: order.statusTipColor }">{{
                                    order.statusTip
                                }}</text> -->
                                <!-- <text
                                    v-if="order.status === 7"
                                    class="margin-left-sm wlIcon-lajitong"
                                    @tap="deleteOrder(order.id, okey)"
                                ></text> -->
                            </view>
                        </view>
                        <!-- 商品 -->
                        <view class="goods-box" @tap="scoreDetails(order.id)">
                            <view
                                class="cu-avatar xl margin-right-bj radius"
                                :style="{ backgroundImage: 'url(' + $wanlshop.oss(order.goods_image, 70, 70) + ')' }"
                            >
                            </view>
                            <view class="content margin-right-bj">
                                <view class="describe">
                                    <view class="text-cut-2">
                                        {{ order.goods_name }}
                                    </view>
                                    <view class="wanl_sku text-min">
                                        <!-- <text class="wanl-gray-dark">{{ goods.difference }}</text> -->
                                    </view>
                                </view>
                                <view class="parameter">
                                    <view class="text-sm text-black">
                                        {{ "￥" + order.type == 2 ? order.money : "" }}
                                        <text class="wlIcon-jifen1"></text>
                                        {{ order.score }}
                                    </view>
                                    <view class="text-min wanl-gray"> x {{ order.goods_num }} </view>
                                    <!-- 退款状态:0=未退款,1=退款中,2=待退货,3=退款完成 -->
                                    <!-- <view class="text-min text-yellow" v-if="order.refund_status != 0">
                                        {{ getRefund(order.refund_status) }}
                                    </view> -->
                                </view>
                            </view>
                        </view>
                        <!-- 底部 -->
                        <view class="price-box text-sm flex">
                            <!-- <view v-if="order.pay.discount_price > 0" class="margin-right-sm wanl-gray"
                                >优惠：<text class="text-price">{{ order.pay.discount_price }}</text></view
                            > -->
                            <!-- <view v-if="order.pay.freight_price > 0" class="margin-right-sm wanl-gray"
                                >快递：<text class="text-price">{{ order.pay.freight_price }}</text></view
                            > -->
                            <view>
                                实付款：<text class=""
                                    >{{ "￥" + order.type == 2 ? order.money : "" }}
                                    <text class="wlIcon-jifen1"></text>
                                    {{ order.score }}</text
                                >
                            </view>
                        </view>
                        <view class="action-box padding-bottom-bj" v-if="order.status == 0">
                            <!-- <button class="cu-btn round line-black margin-lr-bj" @tap="editAddress(order.id)">修改地址</button> -->
                            <button class="cu-btn round line-black" @tap="cancelOrder(order)">取消订单</button>
                            <button class="cu-btn round margin-lr-bj wanl-bg-orange" @tap="paymentOrder(order)">
                                立即支付
                            </button>
                        </view>
                        <view class="action-box padding-bottom-bj" v-if="order.status == 1">
                            <!-- <button class="cu-btn round line-black" @tap="toChat(order.shop_id)">联系商家</button> -->
                            <!-- <button class="cu-btn round margin-lr-bj wanl-bg-orange" @tap="editAddress(order.id)">修改地址</button> -->
                        </view>
                        <view class="action-box padding-bottom-bj" v-if="order.status == 2">
                            <!-- <button class="cu-btn round line-black" @tap="toChat(order.shop_id)">联系商家</button> -->
                            <button
                                class="cu-btn round margin-lr-bj wanl-bg-orange"
                                @click="writeOff(order.use_code_image, order.use_code)"
                            >
                                查看核销码
                            </button>
                        </view>
                        <view class="action-box padding-bottom-bj" v-if="order.status == 3">
                            <button class="cu-btn round line-black" @tap="onLogistics(order.id)">查看物流</button>
                            <button class="cu-btn round margin-lr-bj wanl-bg-orange" @tap="confirmOrder(order)">
                                确认收货
                            </button>
                        </view>
                        <!-- <view class="action-box padding-bottom-bj" v-if="order.status == 4">
                            <button class="cu-btn round line-black" @tap="onLogistics(order.id)">查看物流</button>
                            <button class="cu-btn round margin-lr-bj line-black" @tap="commentOrder(order.id)">评论订单</button>
                        </view> -->
                    </view>
                    <uni-load-more :status="tag.loadingType" :content-text="contentText" />
                    <view class="edgeInsetBottom"></view>
                </scroll-view>
            </swiper-item>
        </swiper>
        <!-- 核销码弹窗 -->
        <WriteOffCode :show="isPopup" :qrcode="qrcodes" @close="close"></WriteOffCode>
    </view>
</template>

<script>
import WriteOffCode from "@/components/Write-off-code/Write-off-code";
export default {
    components: {
        WriteOffCode,
    },
    data() {
        return {
            tabCurrentIndex: 0,
            navList: [
                {
                    status: -2,
                    text: "全部",
                    loadingType: "more",
                    current_page: 1,
                    orderList: [],
                },
                {
                    status: 0,
                    text: "待支付",
                    loadingType: "more",
                    current_page: 1,
                    orderList: [],
                },
                {
                    status: 1,
                    text: "待发货",
                    loadingType: "more",
                    current_page: 1,
                    orderList: [],
                },
                {
                    status: 2,
                    text: "待自提",
                    loadingType: "more",
                    current_page: 1,
                    orderList: [],
                },
                {
                    status: 3,
                    text: "待收货",
                    loadingType: "more",
                    current_page: 1,
                    orderList: [],
                },
                {
                    status: 4,
                    text: "已完成",
                    loadingType: "more",
                    current_page: 1,
                    orderList: [],
                },
                {
                    status: -1,
                    text: "已取消",
                    loadingType: "more",
                    current_page: 1,
                    orderList: [],
                },
            ],
            isPopup: false, //是否显示弹出层
            qrcodes: {},
            //上拉下拉
            total: 0, //数据量
            current_page: 1, //当前页码
            last_page: 1, //总页码
            status: "loading",
            contentText: {
                contentdown: " ",
                contentrefresh: "正在加载..",
                contentnomore: "",
            },
        };
    },
    onLoad(options) {
        this.tabCurrentIndex = options.status;
        console.log(options, "[[[[status]]]]");
        this.loadData();
        // #ifdef MP
        // if (options.state == 0) {
        //     this.loadData();
        // }
        // #endif
    },
    // 监听上拉
    onPullDownRefresh() {
        console.log("上拉", this.tabCurrentIndex);
        this.navList[this.tabCurrentIndex].current_page = 1;
        this.navList[this.tabCurrentIndex].orderList = [];
        this.loadData();
    },
    mounted() {},
    methods: {
        //查看物流
        onLogistics(id) {
            this.$wanlshop.to("/pages/user/order/logistics?id=" + id + "&type=score");
        },
        //关闭弹出层
        close() {
            this.isPopup = false;
        },
        //积分订单详情
        scoreDetails(id) {
            this.$wanlshop.to("/pages/user/score/scoreDetail?order_id=" + id);
        },
        //获取订单列表
        async loadData(source) {
            //这里是将订单挂载到tab列表下
            let index = this.tabCurrentIndex;
            let navItem = this.navList[index];
            let status = navItem.status;
            console.log(index, navItem, status, "--------shuju ");
            //判断是否最后一页
            if (navItem.loadingType == "noMore") {
                return;
            }
            //tab切换只有第一次需要加载数据
            if (source === "tabChange" && navItem.loaded === true) {
                return;
            }
            //防止重复加载
            if (navItem.loadingType === "loading") {
                return;
            }
            navItem.loadingType = "loading";
            // 获取列表
            await uni.request({
                url: "/score/goods/OrderList",
                data: {
                    status: status,
                    page: navItem.current_page,
                },
                success: (res) => {
                    uni.stopPullDownRefresh();
                    navItem.current_page = res.res.data.current_page; //当前页码
                    navItem.loadingType = "more";
                    navItem.current_page++;
                    res.res.data.data.forEach((item) => {
                        navItem.orderList.push(item);
                    });
                    //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
                    this.$set(navItem, "loaded", true);
                },
                complete: (err) => {},
            });
        },

        //swiper 切换
        changeTab(e) {
            this.tabCurrentIndex = e.target.current;
            this.loadData("tabChange");
        },
        //顶部tab点击
        tabClick(index) {
            this.tabCurrentIndex = index;
        },
        //删除订单
        async deleteOrder(order_id, key) {
            uni.showLoading({
                title: "请稍后",
            });
            await uni.request({
                url: "/wanlshop/order/delOrder",
                method: "POST",
                data: {
                    id: order_id,
                },
                success: (res) => {
                    this.navList[this.tabCurrentIndex].orderList.splice(key, 1);
                    uni.hideLoading();
                },
            });
        },
        //取消订单- 设置为7 -全局
        cancelOrder(item) {
            uni.showModal({
                title: "提示",
                content: "确认要取消订单吗?",
                showCancel: true,
                success: async ({ confirm, cancel }) => {
                    if (confirm) {
                        uni.showLoading({
                            title: "请稍后",
                        });
                        // 获取列表
                        await uni.request({
                            url: "/score/goods/CancelOrder",
                            method: "POST",
                            data: {
                                order_id: item.id,
                            },
                            success: (res) => {
                                let { statusTip, statusTipColor } = this.orderstatusExp(-1);
                                uni.hideLoading();
                                uni.showToast({
                                    title: res.res.msg,
                                    icon: "none",
                                    duration: 1000,
                                    mask: true,
                                });
                                item = Object.assign(item, {
                                    status: -1,
                                    statusTip,
                                    statusTipColor,
                                });
                            },
                        });
                    }
                },
            });
        },
        commentOrder(id) {
            this.$wanlshop.to("/pages/user/order/comment?order_id=" + id);
        },
        //支付订单
        async paymentOrder(order) {
            if (order.money > 0) {
                this.$wanlshop.to(`/pages/user/money/pay?order_id=${order.id}&order_type=score`);
            } else {
                await uni.request({
                    url: "/score/goods/OrderDetail",
                    data: {
                        order_id: order.id,
                    },
                    method: "POST",
                    sslVerify: true,
                    success: async (res) => {
                        let order_type = 0;
                        if (res.res.data.address.id) {
                            order_type = 0;
                        } else {
                            order_type = 1;
                        }
                        await uni.request({
                            url: "/score/goods/AddOrder",
                            method: "POST",
                            data: {
                                address_id: res.res.data.address.id,
                                goods_id: order.id,
                                order_type: order_type,
                            },
                            success: async (data) => {
                                console.log(data, "===========zhifdu ");
                                if (res.res.data.list == true) {
                                    await uni.request({
                                        url: "/wanlshop/pay/payment",
                                        method: "POST",
                                        data: {
                                            order_type: "score",
                                            type: "balance",
                                            method: "balance",
                                            code: null,
                                            order_id: order.id,
                                            token: res.data.token,
                                        },
                                        success: (datas) => {
                                            // 余额支付/小程序支付
                                            this.$wanlshop.to(`/pages/page/success`);
                                        },
                                    });
                                } else {
                                    this.$wanlshop.to(
                                        `/pages/user/money/pay?token=${res.data.token}&data=${JSON.stringify(
                                            res.data.list
                                        )}`
                                    );
                                }
                            },
                            fail: (res) => {
                                uni.showToast({
                                    icon: "none",
                                    title: res.res.msg,
                                });
                            },
                        });
                    },
                    fail: (error) => {},
                });
            }
        },
        //确认收货- 全局
        async confirmOrder(item) {
            uni.showModal({
                title: "提示",
                content: "确认已经收到商品?",
                showCancel: true,
                success: async ({ confirm, cancel }) => {
                    if (confirm) {
                        uni.showLoading({
                            title: "请稍后",
                        });
                        // 获取列表
                        await uni.request({
                            url: "/score/goods/CompleteOrder",
                            method: "POST",
                            data: {
                                order_id: item.id,
                            },
                            success: (res) => {
                                let { statusTip, statusTipColor } = this.orderstatusExp(4);
                                uni.hideLoading();
                                uni.showToast({
                                    title: res.res.msg,
                                    icon: "none",
                                    mask: true,
                                });
                                item = Object.assign(item, {
                                    status: 4,
                                    statusTip,
                                    statusTipColor,
                                });
                            },
                        });
                    }
                },
            });
        },
        //订单状态文字和颜色
        orderstatusExp(status) {
            let statusTip = "",
                statusTipColor = "#333";
            switch (+status) {
                case 0:
                    statusTip = "等待支付";
                    statusTipColor = "#f40";
                    break;
                case 1:
                    statusTip = "等待卖家发货";
                    break;
                case 2:
                    statusTip = "等待买家提货";
                    break;
                case 3:
                    statusTip = "卖家已发货";
                    break;
                case 4:
                    statusTip = "交易成功";
                    break;
                case -1:
                    statusTip = "已取消";
                    break;
                case -2:
                    statusTip = "全部";
                    break;
                //更多自定义
            }
            return {
                statusTip,
                statusTipColor,
            };
        },
        getRefund(status) {
            return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];
        },
        // 修改地址
        editAddress(id) {
            this.$wanlshop.to("/pages/user/address/address?source=2&order_id=" + id);
        },
        //添加或修改成功之后回调
        async refreshList(address_id, order_id) {
            uni.showLoading({
                title: "正在提交新地址",
            });
            // 获取列表
            await uni.request({
                url: "/wanlshop/order/editOrderAddress",
                method: "POST",
                data: {
                    id: order_id,
                    address_id: address_id,
                },
                success: (res) => {
                    this.$wanlshop.msg("地址修改成功");
                    uni.hideLoading();
                },
            });
        },
        // 生成核销码
        writeOff(use_code_image, use_code) {
            this.isPopup = true;
            this.qrcodes = {
                use_code_image: use_code_image,
                use_code: use_code,
            }; //核销总码
        },
    },
};
</script>

<style>
page {
    height: 100%;
}
</style>
